<template>
  <div id="taopuPage" style="padding-bottom: 20px" @click="showResult = false">
    <HeadNav
      type="publish"
      ref="head"
      :show="1"
      @publisherChange="publisherChange()"
    ></HeadNav>
    <div class="wd-1220">
      <div class="clearfix">
        <div class="float-left">
          <SlideNav type="publish" sort="authors"></SlideNav>
        </div>
        <div class="float-right">
          <div class="main-container" v-if="pagePower">
            <div class="model-container">
              <div class="model-bg search">
                <p class="title">搜索本社作者</p>
                <div class="content common" style="position: relative">
                  <a-input-search
                    placeholder="搜索作者名称"
                    size="large"
                    enter-button="搜索"
                    @input="inputSearch"
                    @focus="inputSearch"
                    @click.stop="inputClick"
                    v-model="inputVal"
                    @search="onSearch"
                  >
                    <div slot="prefix">
                      <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-search" />
                      </svg>
                      <span class="rowLine">|</span>
                    </div>
                  </a-input-search>
                  <div class="search-result" v-if="showResult">
                    <div class="list" v-if="dataSource.length > 0">
                      <div
                        class="result-content"
                        v-for="(item1, index1) in dataSource"
                        :key="index1"
                        @click.stop="selected(item1, index1)"
                      >
                        <img
                          :src="item1.photo"
                          alt
                          style="width: 35px; height: 35px"
                          v-if="item1.photo"
                        />
                        <span
                          v-else
                          class="no-pic"
                          style="min-width: 35px; min-height: 35px"
                        ></span>
                        <span class="result-title" :title="item1.name">{{
                          item1.name
                        }}</span>
                      </div>
                    </div>
                    <div
                      class="no-result"
                      v-if="dataSource.length == 0 && showAbout"
                    >
                      没有相关作者
                    </div>
                    <div
                      style="text-align: center; margin-top: 100px"
                      v-if="searchLoading"
                    >
                      <a-spin tip></a-spin>
                    </div>
                  </div>
                  <div
                    style="text-align: center; margin-top: 10px"
                    v-if="searchLoading"
                  >
                    <a-spin tip></a-spin>
                  </div>
                </div>
                <p class="curren" v-if="historyList.length > 0">最近查看</p>
                <div class="history" v-if="historyList.length > 0">
                  <div
                    class="content"
                    v-for="(item, index) in historyList"
                    :key="index"
                    @click="$toAuthor(item.author_id)"
                  >
                    <div>
                      <img
                        :src="item.photo"
                        alt
                        style="width: 100px; height: 100px"
                        v-if="item.photo"
                      />
                      <span
                        v-else
                        class="no-pic"
                        style="min-width: 100px; min-height: 100px"
                      ></span>
                    </div>
                    <div class="title" :title="item.name">{{ item.name }}</div>
                    <div class="sale">
                      <span v-if="item.country">[{{ item.country }}]</span
                      ><span v-else>--</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 作者列表 -->
            <div v-if="authorList.length > 0">
              <div
                class="model-container"
                v-for="(item, index) in authorList"
                :key="index"
              >
                <div class="model-bg">
                  <div class="author-list">
                    <div class="rank">
                      {{ index + 1 + (pageSize * page - pageSize) }}
                    </div>
                    <div class="author-img">
                      <img
                        :src="item.photo"
                        v-if="item.photo"
                        alt
                        style="width: 60px; height: 60px"
                      />
                      <span
                        v-else
                        class="no-pic"
                        style="min-width: 60px; min-height: 60px"
                      ></span>
                    </div>
                    <div class="author-info">
                      <div>
                        <span
                          class="click-font"
                          @click="$toAuthor(item.author_id)"
                          >{{ item.name }}</span
                        >
                      </div>
                      <div>
                        <span
                          class="data-tab data-tab-night"
                          v-if="item.country"
                          >{{ item.country }}</span
                        >
                        <span
                          class="data-tab data-tab-night"
                          v-if="item.birth_date"
                          >{{ item.birth_date }}</span
                        >
                      </div>
                    </div>
                    <div class="author-block">
                      <div>本月销售指数</div>
                      <div class="num">{{ item.sale_amount.toLocaleString() }}</div>
                    </div>
                    <!-- <div class="author-block">
                      <div>本月作者榜排名</div>
                      <div class="num">
                        {{ item.rank_all_month ? item.rank_all_month : "--"
                        }}<span class="ming" v-if="item.rank_all_month"
                          >名</span
                        >
                      </div>
                    </div>
                    <div class="author-block">
                      <div>年度作者榜排名</div>
                      <div class="num">
                        {{ item.rank_all_year ? item.rank_all_year : "--"
                        }}<span class="ming" v-if="item.rank_all_year">名</span>
                      </div>
                    </div> -->
                    <div class="author-block">
                      <div>作品</div>
                      <div class="num">
                        {{ item.goods_count }}<span class="ming">个</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="model-container" v-else>
              <div class="model-bg">
                <div class="no-data">暂无数据</div>
              </div>
            </div>
            <div class="model-container" v-if="authorList.length > 0">
              <div class="model-bg">
                <!-- 分页 -->
                <div style="text-align: right; padding: 10px 15px">
                  <a-pagination
                    :show-total="(total) => `共 ${total} 条数据`"
                    :default-current="1"
                    :total="total"
                    v-model="page"
                    :defaultPageSize="pageSize"
                    @change="onShowSizeChange"
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="main-container" v-else>
            <div class="model-container">
              <div
                class="model-bg"
                style="
                  min-height: 660px;
                  padding-bottom: 75px;
                  position: relative;
                "
              >
                <PageNoPower></PageNoPower>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Loading ref="load" :show="1" :isLoading="isLoading"></Loading>
  </div>
</template>
<style scoped lang="scss" src="@/style/scss/pages/publish/taopu100.scss"></style>
<script>
import {
  MYAUTHOR_LISTS,
  MYAUTHOR_HISTORY,
  MYAUTHOR_SEARCH,
} from "../../apis/publish.js";
export default {
  data() {
    return {
      pagePower: true,
      total: 0,
      page: 1,
      pageSize: 20,
      authorList: [],
      isLoading: true,
      inputVal: "",
      dataSource: [],
      searchLoading: false,
      showResult: false,
      showAbout: false,
      historyList: [],
    };
  },
  mounted() {
    this.getData();
    this.getHistory();
  },
  updated() {},
  methods: {
    async getData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        // supplier_id:438,
        name: this.inputVal,
        page: this.page,
        page_size: this.pageSize,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await MYAUTHOR_LISTS(data);
      if (res.code == 0) {
        this.pagePower = true;
        this.authorList = [];
        this.authorList = res.data.list;
        this.total = res.data.count;
        this.$nextTick(()=>{
          this.isLoading = false;
        })
      } else {
        this.isLoading = false;
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    async search(_value) {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        search: _value,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await MYAUTHOR_SEARCH(data);
      if (res.code == 0) {
        // if (res.data.search == this.inputVal) {
        this.dataSource = res.data.map((value, key) => {
          return value;
        });
        // }
        this.searchLoading = false;
        this.showAbout = true;
      } else {
        this.searchLoading = false;
        this.$refs.head.globalTip(1, res.message, res.code);
      }
    },
    // 搜索历史
    async getHistory() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await MYAUTHOR_HISTORY(data);
      if (res.code == 0) {
        this.pagePower = true;
        this.historyList = res.data;
      } else {
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    inputClick() {},
    onSearch() {
      if (this.inputVal.length > 0) {
        this.showResult = false;
        this.page = 1;
        this.isLoading = true;
        this.getData();
      } else {
        this.$refs.head.globalTip(1, "请输入作者名称", 0);
      }
    },
    inputSearch(e) {
      if (e.relatedTarget == undefined || e.relatedTarget == null) {
        this.dataSource = [];
        if (this.inputVal.length > 0) {
          this.showResult = true;
          this.showAbout = false;
          this.searchLoading = true;
          this.search(this.inputVal);
        } else {
          this.showResult = false;
        }
      } else {
      }
    },
    selected(item1, index1) {
      this.$toAuthor(item1.author_id);
      this.showResult = false;
    },
    // 分页切换
    onShowSizeChange(current, pageSize) {
      this.isLoading = true;
      this.page = current;
      this.getData();
    },
    // 头部切换机构触发
    publisherChange() {
      this.isLoading = true;
      this.showResult = false;
      this.page = 1;
      this.getData();
      this.getHistory();
    },
  },
};
</script>
